<template>
	<div>
		<el-container>
			<el-header>
				<AnimeMiddle></AnimeMiddle>
			</el-header>
		</el-container>
		<div class="products" style="margin: auto">
			<div class="product">
				<div class="productImg">
					<ImagesVue :img="image" :images="product.pics"></ImagesVue>
					<div
						style="
							display: flex;
							justify-content: center;
							margin-top: 20px;
							width: 250px;
						"
					>
						<div style="float: left; color: #acacac; margin-right: 10px">
							<van-icon name="star-o" size="20px" color="#acacac" v-if="true" />
							<van-icon name="star" size="20px" color="#ff5000" v-else />
							收藏宝贝
						</div>
						<div style="color: #acacac">
							<van-icon name="search" size="20px" color="#acacac" /> 找相似低价
						</div>
					</div>
				</div>
				<div class="productIntroduce">
					<p class="name">{{ product.goodsName }}</p>
					<p>
						<span>销售</span>
						<span>&nbsp;&nbsp;100+&nbsp;&nbsp;</span>
						<span>|&nbsp;&nbsp;评价&nbsp;&nbsp;</span>
						<span>30+</span>
					</p>
					<p class="price">￥{{ product.goodsPrice }}</p>
					<div style="display: table-footer-group">
						<div
							v-for="(item, index) in product.manyAttrs"
							:key="index"
							class="attrs"
						>
							<div class="attrName">{{ item.attrName }}:</div>
							<div
								v-if="item.attrVals.length > 0"
								style="width: 480px; display: flex; flex-wrap: wrap"
							>
								<div
									v-for="(value, i) in item.attrVals"
									:key="i"
									style="float: left"
									class="attrVals"
									:class="{ checked: item.manyPicsCheckeds === i }"
									@click="checkedImg(item, i, index)"
								>
									<div
										v-if="
											Array.isArray(item.manyPics) &&
											i < item.manyPics.length &&
											item.manyPics[i] !== '0'
										"
									>
										<el-tooltip
											class="item"
											effect="dark"
											:content="value"
											placement="bottom-start"
											:visible-arrow="false"
										>
											<img :src="item.manyPics[i]" alt="" class="attr_img" />
										</el-tooltip>
									</div>
									<div v-else class="attrVal">{{ value }}</div>
								</div>
							</div>
						</div>
					</div>
					<div style="display: flex; margin-top: 10px">
						<div style="margin-right: 20px; width: 60px; color: #999">数量</div>
						<div>
							<van-stepper v-model="num" disable-input input-width="50px" />
						</div>
					</div>
					<el-button class="cart" @click="addCart">加入购物车</el-button>
					<el-button class="cart" @click="open">购买</el-button>
				</div>

				<div class="shop">
					<div class="a">店铺信息</div>
					<div>
						<router-link to="#" id="shopimg"
							><img :src="shop.shopImg" alt="没有图片"
						/></router-link>
						<label for="shopimg" class="a1">
							<span>{{ shop.shopName }}</span>
							<div>
								<span>物流服务</span>
								<span>卖家服务</span>
								<span>宝贝服务</span>
							</div>
							<div class="a2">
								<span
									>{{ shop.materialFlow }}
									<i class="el-icon-top" v-if="shop.materialFlow > 3.0"></i>
									<i class="el-icon-bottom" v-if="shop.materialFlow < 3.0"></i>
								</span>
								<span
									>{{ shop.seller }}
									<i class="el-icon-top" v-if="shop.seller > 3.0"></i>
									<i class="el-icon-bottom" v-if="shop.seller < 3.0"></i>
								</span>
								<span
									>{{ shop.treasure }}
									<i class="el-icon-top" v-if="shop.treasure > 3.0"></i>
									<i class="el-icon-bottom" v-if="shop.treasure < 3.0"></i>
								</span>
							</div>
						</label>
					</div>

					<el-button>进店逛逛</el-button>
					<div>
						<div
							v-for="(item, index) in shopGoods"
							:key="index"
							class="pushDeposit"
						>
							<router-link
								:to="'/app1/' + item.goodsId"
								@click="ons(item.goodsId)"
								><img :src="item.pics" alt="" @click="ons(item.goodsId)"
							/></router-link>
							<span>{{ item.goodsName }}</span>
						</div>
					</div>
				</div>
			</div>
			<PushStoreVue
				:pushStores="pushStores"
				:name="pushStoreName"
			></PushStoreVue>
			<DisplayVue ref="displayRef"></DisplayVue>
		</div>
		<el-dialog
			title="商品购买"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose"
		>
			<van-card
				:num="num"
				:price="product.goodsPrice.toFixed(2)"
				:title="product.goodsName"
				:thumb="product.pics[0]"
			/>
			<el-select
				v-model="values"
				placeholder="请选择地址"
				style="width: 100%; margin-top: 20px"
				@change="change"
			>
				<el-option
					v-for="item in addressList"
					:key="item.id"
					:label="item.address"
					:value="item.id"
				>
					<span style="float: left; margin-right: 10px">{{ item.name }}</span>
					<span style="float: left">{{ item.address }}</span>
					<span style="float: right; color: #8492a6; font-size: 13px">{{
						item.tel
					}}</span>
				</el-option>
			</el-select>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="buy">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import ImagesVue from '@/components/front/Images.vue'
	import PushStoreVue from '@/components/front/PushStore.vue'
	import DisplayVue from '@/components/front/shop/Display.vue'
	import AnimeMiddle from '@/components/front/AnimeMiddle.vue'
	import '@/assets/css/global.css'

	export default {
		components: { ImagesVue, PushStoreVue, DisplayVue, AnimeMiddle },
		data() {
			return {
				product: '',
				num: 1,
				shop: {
					shopId: '',
					shopImg: '',
					shopName: '',
					materialFlow: '',
					seller: '',
					treasure: '',
				},
				shopGoods: [],
				pushStores: '',
				pushStoreName: '商品推存',
				goods: '',
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 5,
				},
				image: '',
				manyAttrsIndex: [],
				user: {},
				dialogVisible: false,
				addressList: [],
				addressId: '',
				values: '',
			}
		},
		created() {
			this.do()
		},
		methods: {
			async do() {
				this.user = this.$cookies.get('user')
				const res = await this.$api.sort.findidfigure(this.$route.params.id)
				//商品信息
				this.product = res.data.data
				this.product.pics = this.product.pics ? this.product.pics.split(',') : []
				this.product.detailPics = this.product.detailPics
					? this.product.detailPics.split(',')
					: []
				if (this.product.manyAttrs.length > 0) {
					this.product.manyAttrs.forEach((item) => {
						item.attrVals = item.attrVals ? item.attrVals.split(' ') : []
						item.addPrice = item.addPrice ? item.addPrice.split(' ') : []
						item.manyPics = item.manyPics ? item.manyPics.split(' ') : []
						item.manyPicsCheckeds = 0
						this.manyAttrsIndex.push(0)
						if (item.addPrice[0]) {
							this.product.goodsPrice += item.addPrice[0] - 0
						}

						item.checkeds = item.checkeds
							? item.checkeds.split(' ').map((val) => val === 'true')
							: []
						if (item.manyPics.length > 0) {
							const img = []
							item.manyPics.forEach((item) => {
								this.$api.rear_end.download(item).then((res) => {
									let url = window.URL.createObjectURL(
										new Blob([res.data], { type: 'image/jpeg' })
									)
									img.push(url)
								})
							})
							item.manyPics = img
						}
					})
				}
				if (this.product.pics.length > 0) {
					const img = []
					this.product.pics.forEach((item, i) => {
						this.$api.rear_end.download(item).then((res) => {
							let url = window.URL.createObjectURL(
								new Blob([res.data], { type: 'image/jpeg' })
							)
							img[i] = url
							if (i === 0) {
								this.image = url
							}
						})
					})
					this.product.pics = img
				}
				if (this.product.detailPics.length > 0) {
					const detailimg = []
					this.product.detailPics.forEach((item, i) => {
						this.$api.rear_end.download(item).then((res) => {
							let url = window.URL.createObjectURL(
								new Blob([res.data], { type: 'image/jpeg' })
							)
							detailimg.push(url)
							if (i === 0) {
								this.image = url
							}
						})
					})
					this.product.detailPics = detailimg
				}
				this.$nextTick(() => {
					this.$refs.displayRef.goods = this.product
				})
				//  根据商品名推荐5个商品
				this.queryInfo.query = this.product.goodsName
				let figures = await this.$api.sort.getfigures1(this.queryInfo)
				figures.data.data.forEach((item) => {
					item.pics = item.pics ? item.pics.split(',') : []
					item.detailPics = item.detailPics ? item.detailPics.split(',') : []
					item.manyAttrs.forEach((item) => {
						item.attrVals = item.attrVals ? item.attrVals.split(' ') : []
						item.addPrice = item.addPrice ? item.addPrice.split(' ') : []
						item.manyPics = item.manyPics ? item.manyPics.split(' ') : []
						item.checkeds = item.checkeds
							? item.checkeds.split(' ').map((val) => val === 'true')
							: []
					})

					if (item.pics.length > 0) {
						const img = []
						item.pics.forEach((item) => {
							this.$api.rear_end.download(item).then((res) => {
								let url = window.URL.createObjectURL(
									new Blob([res.data], { type: 'image/jpeg' })
								)
								img.push(url)
							})
						})
						item.pics = img
					}
				})

				//推荐商品信息
				this.pushStores = figures.data.data

				//获取商店信息
				this.getShop()
				//根据创建者id获取商品信息
				this.getshopGood()
			},
			// 点击店铺推荐商品进入详情页
			ons(id) {
				let path = '/app1/' + id
				this.$router.push(path)
				location.reload()
			},
			//商店信息获取
			async getShop() {
				const res = await this.$api.sort.shop({
					createAdmin: this.product.createAdminId,
				})
				if (res.data.code === 1) {
					this.shop.shopId = res.data.data[0].shopId
					this.shop.shopName = res.data.data[0].shopName
					this.shop.treasure = res.data.data[0].treasure
					this.shop.materialFlow = res.data.data[0].materialFlow
					this.shop.seller = res.data.data[0].seller
					this.$api.rear_end.download(res.data.data[0].shopImg).then((res) => {
						let url = window.URL.createObjectURL(
							new Blob([res.data], { type: 'image/jpeg' })
						)
						this.shop.shopImg = url
					})
				} else {
					this.$message.error('没有数据')
				}
			},
			//获取商店商品信息
			async getshopGood() {
				const res = await this.$api.sort.gtfigurees2({
					createAdminId: this.product.createAdminId,
				})
				if (res.data.code === 1) {
					res.data.data.forEach((item) => {
						item.pics = item.pics ? item.pics.split(',') : []
						if (item.pics.length > 0) {
							this.$api.rear_end.download(item.pics[0]).then((res) => {
								let url = window.URL.createObjectURL(
									new Blob([res.data], { type: 'image/jpeg' })
								)
								item.pics = url
							})
						}
					})
					this.shopGoods = res.data.data
				}
			},
			async open() {
				if (this.user) {
					let res = await this.$api.sort.allAddress({ userId: this.user.userId })
					if (res.data.code == 1) {
						this.addressList = res.data.data
						this.dialogVisible = true
					}
				} else {
					this.$message.warning('请登录，再进行购买！')
				}
			},
			checkedImg(item, i, manyAttrsIndex) {
				if (item.manyPics[i] && item.manyPics[i] !== '0') {
					this.image = item.manyPics[i]
				}
				let index = item.manyPicsCheckeds
				if (item.addPrice[i] && item.addPrice[index]) {
					this.product.goodsPrice += item.addPrice[i] - item.addPrice[index]
				}
				item.manyPicsCheckeds = i
				this.manyAttrsIndex[manyAttrsIndex] = i
				this.$forceUpdate()
			},
			onAddCartClicked() {},
			onBuyClicked() {},
			//添加购物车
			async addCart() {
				var user = this.$cookies.get('user')
				if (this.user) {
					var data = {
						goodsId: this.product.goodsId,
						number: this.num,
						totalPrice: this.product.goodsPrice,
						userId: user.userId,
						manyAttrsIndex: this.manyAttrsIndex.join(' '),
					}
					let res = await this.$api.rear_end.addCart(data)
					if (res.data.code == 1) {
						this.$message.success(res.data.data)
						return
					}
					this.$message.error(res.data.data)
				} else {
					this.$message.warning('请登录，再进行购买！')
				}
			},
			//关闭购买对话框时清除数据
			handleClose() {
				this.dialogVisible = false
			},
			// 购买商品
			async buy() {
				if (this.addressId) {
					var data = {
						goodsId: this.product.goodsId,
						userId: this.user.userId,
						number: this.num,
						totalPrice: this.product.goodsPrice,
						addressId: this.addressId,
						manyAttrsIndex: this.manyAttrsIndex.join(' '),
						adminId: this.product.createAdminId,
					}
					let res = await this.$api.rear_end.addOrders(data)
					if (res.data.code == 1) {
						this.$message.success('购买成功')
					} else {
						this.$message.error('购买失败')
					}
					this.dialogVisible = false
				} else {
					this.$message.warning('请选择地址')
				}
			},
			change(val) {
				this.addressId = val
			},
		},
	}
</script>

<style scoped lang="less">
	.products {
		background-color: #f1e7df;
		width: 1200px;
	}
	.product {
		width: 1170px;
		display: flex;
		min-height: 450px;
		margin-left: 20px;
		background: #ffff;
		margin-top: 100px;
	}
	.productImg {
		flex: 1;
		align-self: stretch;
	}
	.productIntroduce {
		width: 700px;
		height: 100%;
		padding-top: 20px;
		border-right: 1px solid #eeeeee;
		border-bottom: 1px solid #eeeeee;
		flex: 2;
		align-self: stretch;
	}
	.name {
		font-size: 20px;
	}
	span {
		color: #a1a1a1;
		font-size: 12px;
	}
	.attrs {
		font-size: 14px;
		color: #999;
		width: 100%;
		flex-direction: row;
		display: flex;
		align-items: flex-start;
		margin-top: 10px;
	}
	.attrName {
		width: 60px;
		color: #999;
		margin-right: 16px;
		flex: 1;
	}
	.attrVals {
		cursor: pointer;
		padding: 6px;
		line-height: 28px;
		margin: 0 4px 4px 0;
		flex-direction: row;
		box-sizing: border-box;
		position: relative;
		border: 2px solid #eee;
		background-color: #eee;
		border-radius: 4px;
	}
	.attrVals:hover {
		border: 1px solid #f40;
		margin: 2px 4px 4px 0px;
	}
	.attr_img {
		padding: 1px;
		width: 28px;
		height: 28px;
		align-items: center;
	}
	.attrVal {
		max-width: 100%;
		display: inline-block;
		text-overflow: ellipsis;
		overflow: hidden;
		display: flex;
		flex: 1;
		color: #f40;
		background-color: white;
	}
	.checked {
		border: 2px solid #f40;
	}
	.price {
		color: #ff5c12;
		font-size: 35px;
	}
	.quantity {
		color: #000;
		border: 1px solid #f1f1f1;
		background: #f1f1f1;
	}
	/deep/ .el-button {
		background: #f1f1f1;
		color: #000;
		padding: 5px 10px;
		border: 1px solid #f1f1f1;
		margin-left: 5px;
		margin-right: 5px;
	}
	/deep/ .el-tag {
		background: #f1f1f1;
		color: #000;
		padding: 0px 25px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		border: 1px solid #f1f1f1;
	}
	/deep/ .cart {
		width: 200px;
		height: 30px;
		margin-top: 20px;
		margin-bottom: 20px;
		color: #ffffff;
		background: #fe8c20;
	}
	.shop {
		width: 350px;
		height: 450px;
		background-color: #ffff;
		flex: 1.4;
		overflow: hidden;
	}
	.a {
		margin-left: 25px;
	}
	.a1 {
		width: 280px;
		display: block;
		margin-left: 165px;
	}
	.a1 span {
		margin-left: 10px;
		color: #000;
	}
	.a1 div {
		margin-top: 7px;
	}
	.a1 div span {
		margin-left: 10px;
		color: #b8b8b8;
	}
	.a1 .a2 span {
		margin-left: 25px;
		color: #000;
	}
	//商品店铺样式
	#shopimg {
		margin-left: 45px;
		float: left;
	}
	.shop img {
		width: 80px;
		height: 80px;
	}
	.el-icon-top {
		color: red;
	}
	.el-icon-bottom {
		color: red;
	}
	/deep/ .shop .el-button {
		background: #f2f2f2;
		border-radius: 20px;
		width: 150px;
		margin-top: 20px;
		margin-left: 100px;
	}
	.pushDeposit {
		width: 110px;
		height: 125px;
		float: left;
		margin-top: 15px;
		margin-left: 6px;
	}
	.pushDeposit span {
		width: 85px;
		margin-left: -5px;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	//推存店铺样式
	.pushStore {
		width: 1170px;
		height: 320px;
		background-color: #ffffff;
		border-radius: 12px;
		margin-top: 10px;
		margin-left: 20px;
		overflow: hidden;
	}
	.display {
		width: 1190px;
	}
	.el-main {
		margin-top: -100px;
	}
	// /deep/.el-tooltip__popper.is-dark {
	//     background: rgba(70,76,91,.9)!important;
	//     color: #ff4c0c !important;
	//   }
</style>
